<template>
    <div>
      <h1>{{ cont }}</h1>
      <button v-on:click="cont++">点击</button>
      <!-- 2.v-on：事件="motheods中的函数" -->
      <button v-on:click="fn">点击</button>
      <!-- 调动methods里的函数同时并传参 -->
      <button v-on:click="fn2(15)">触发函数并传参</button>
      <button @click="fn3">减少</button>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        cont: 1,
      };
    },
    methods: {
      fn() {
        //当你在 methods 里面在函数中使用this.xxx 会自动去data 里面找
        console.log("你好");
        this.cont += 3;
      },
      fn2(a) {
        console.log(a);
        this.cont = this.cont + a;
      },
      fn3(){
        this.cont--
      }
    },
  };
  </script>
  
  <style>
  </style>